<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>管家信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>管辖详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="center">
      <div
        style="position: absolute;right: 15px; top:-20px;
"
      >
        <el-button size="medium" style="background-color:#fd804c;color: #fff;">
          导出数据
        </el-button>
      </div>

      <hr />
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="businessAreaCode" label="管家ID">
        </el-table-column>
        <el-table-column prop="businessAreaName" label="城市">
        </el-table-column>
        <el-table-column prop="cityName" label="项目名称"> </el-table-column>
        <el-table-column prop="businessArea" label="管家姓名">
          <template slot-scope="scope">
            <div>{{ scope.row.businessArea }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="businessArea" label="管家手机号码">
          <template slot-scope="scope">
            <div>{{ scope.row.businessArea }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="businessArea" label="管辖楼栋单元">
          <template slot-scope="scope">
            <div>{{ scope.row.businessArea }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="businessArea" label="管辖房间">
          <template slot-scope="scope">
            <div>{{ scope.row.businessArea }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="updater" label="房间ID"> </el-table-column>
      </el-table>
      <div class="block">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            class="page"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obtainList: [],
      tableData: [],
      pageIndex: 1,
      pageSize: 20,
      business: [],
      value: "",
      value1: "",
      total: 0,
      cityCode: "",
      cityName: ""
    };
  },
  activated() {
    // this.activityNo = this.$route.query.activityNo || "";

    this.DetailByPage();
    this.obtain();
  },
  methods: {
    isSelect() {
      (this.pageIndex = 1), (this.pageSize = 20), this.DetailByPage();
    },

    isEmpty() {
      (this.pageIndex = 1),
        (this.pageSize = 20),
        (this.value = ""),
        (this.value1 = ""),
        (this.total = 0),
        (this.totalobtainList = []),
        (this.business = []),
        (this.cityCode = ""),
        (this.cityName = "");

      this.DetailByPage();
    },

    businessList() {
      this.$http({
        url:
          "hsssystemadmin/v1/businessManagement/getBusinessNameList?cityCode=" +
          this.cityCode,
        method: "get"
      }).then(res => {
        //console.log(res);
        this.business = res.data;
      });
    },
    DetailByPage() {
      this.$http({
        url: "hsssystemadmin/v1/businessManagement/getBusinessDetailByPage",
        method: "POST",
        data: {
          businessAreaName: this.value1,
          cityCode: this.cityCode,
          page: this.pageIndex,
          size: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
      });
    },

    // 城市
    obtain() {
      this.$http({
        url: "/hsssystemadmin/v1/businessManagement/getCityList",
        method: "get"
      }).then(res => {
        this.obtainList = res.data;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    }
  }
};
</script>
<style scoped lang="scss">
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;

  padding: 0 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.search {
  margin-left: 18px;
  margin-bottom: 15px;
}
.topImg {
  margin-right: 20px;
}
.cityinput {
  margin-right: 30px;
}
.entirety {
  width: 95%;
  margin: 10px;
  // border: 7px solid #fafafa;
  border: 7px solid #ebeef1;
  border-radius: 10px;
  .basic {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
}
.demo-input-suffix {
  margin-left: 1%;
  width: 100%;
}
</style>
